<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Lightly-HTML-Project</title>
  <style type="text/css">
    html,div,ul,li {margin: 0px;padding: 0px;}
    a{cursor: pointer;}
    li {list-style: none;cursor: pointer;}
    fieldset {border: #000 1px dashed;width: 225px;height: 225px;padding: 10px;text-align: center;float: left;margin-left: 5px;}
    #cont_left {width: 300px;height: 500px;float: left;}
  </style>
</head>
<body>
<!--209020347  罗宋波-->
<div id="cont_left">
  <ul><img src="img/fold.gif"><a onclick="show('menu1')"> 通过DOM获取信息 </a>
    <ul id="menu1">
      <li onclick="showImg()"><img src="img/doc.gif">获取原始图片路径</li>
      <li onclick="getFruit()"><img src="img/doc.gif">获取我喜欢的水果</li>
    </ul>
  </ul>

  <ul><img src="img/fold.gif"><a onclick="show('menu2')"> 通过DOM操作元素 </a>
    <ul id="menu2">
      <li onclick="createImg()"><img src="img/doc.gif">创建图片</li>
      <li onclick="cloneImg()"><img src="img/doc.gif">克隆图片</li>
      <li onclick="changeImg()"><img src="img/doc.gif">改变图片</li>
      <li onclick="removeImg()"><img src="img/doc.gif">删除图片</li>
    </ul>
  </ul>

  <ul><img src="img/fold.gif"><a onclick="show('menu3')"> 通过DOM操作样式 </a>
    <ul id="menu3">
      <li onclick="changeCss1()"><img src="img/doc.gif">为原始图片加上行间样式</li>
      <li onclick="changeCss2()"><img src="img/doc.gif">为所有的fieldset加上内部样式</li>
    </ul>
  </ul>

</div>
<fieldset>
  <legend>原始图片</legend>
  <img id="fruit" src="img/fruit.jpg">
</fieldset>
<fieldset>
  <legend>图片路径</legend>
  <p id="msg1">在这里显示</p>
</fieldset>
<fieldset>
  <legend>选择你喜欢的水果</legend>
  <ul style="text-align: left;">
    <li>
      <input name="enjoy" type="checkbox" value="苹果" />苹果
    </li>
    <li>
      <input name="enjoy" type="checkbox" value="香蕉" checked="checked" />香蕉
    </li>
    <li>
      <input name="enjoy" type="checkbox" value="葡萄" />葡萄
    </li>
    <li>
      <input name="enjoy" type="checkbox" value="梨" checked="checked" />梨
    </li>
    <li>
      <input name="enjoy" type="checkbox" value="西瓜" />西瓜
    </li>
  </ul>
  <div id="msg2" style="margin-top: 10px;text-align: left;"></div>
</fieldset>
<fieldset>
  <legend>创建图片</legend>
  <div id="msg3" ></div>
</fieldset>
<fieldset>
  <legend>克隆图片</legend>
  <div id="msg4"></div>
</fieldset>
<script>
  //菜单收缩与扩展
  function show(title) {
    let currentMenu = document.getElementById(title);
    let currentStatus = currentMenu.style.display;
    currentMenu.style.display = currentStatus == "" ? "none" : "";
  }
  //获取原始图片路径
  function showImg(){
    var imgSrc = document.getElementById("fruit").getAttribute("src");
    document.getElementById("msg1").innerHTML = imgSrc;
  }
  //获取喜欢的水果
  function getFruit() {
    var fruitsArray=document.getElementsByName('enjoy');
    var selectedFruits="";
    for(var i=0;i<fruitsArray.length;i++){
      if(fruitsArray[i].checked){
        selectedFruits+=fruitsArray[i].value+" ";
      }
    }
    document.getElementById("msg2").innerHTML="我喜欢的水果："+selectedFruits;
  }
  //创建图片
  function createImg() {
    var img = document.createElement("img");
    img.setAttribute("src", "img/cxk.jpg");
    img.setAttribute("alt", "苹果图片");
    document.getElementById("msg3").appendChild(img);
  }
  //克隆图片
  function cloneImg() {
    var origImg=document.getElementById('fruit');
    var newImg=origImg.cloneNode(true);
    document.getElementById('msg4').appendChild(newImg);
  }
  //改变图片
  function changeImg() {
    var fruit = document.getElementById('fruit');
    if (fruit.getAttribute("src") === "img/fruit.jpg") {
      fruit.setAttribute("src", "img/cxk.jpg");
      fruit.setAttribute("alt", "香蕉图片");
    }
    else if (fruit.getAttribute("src") === "img/cxk.jpg") {
      fruit.setAttribute("src", "img/grape.jpg");
      fruit.setAttribute("alt", "葡萄图片");
    } else {
      fruit.setAttribute("src", "img/fruit.jpg");
      fruit.setAttribute("alt", "原始图片");
    }
  }
  //删除图片
  function removeImg() {
    var img=document.getElementById('fruit');
    img.parentNode.removeChild(img);
  }
  //操作样式1
  function changeCss1(){
    var fruit = document.getElementById('fruit');
    fruit.style.border = '1px solid black';
    fruit.style.padding = '5px';
  }
  //操作样式2
  function changeCss2(){
    var fieldsets=document.getElementsByTagName('fieldset');
    for(var i=0;i<fieldsets.length;i++){
      fieldsets[i].style.backgroundColor='lightgray';
      fieldsets[i].style.padding='10px';
    }
  }
</script>
</body>
</html>
